<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>采集模板</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/all.min.css" rel="stylesheet">
    <link href="../css/fontawesome.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
</head>
<body>
    <div id="templateApp" class="container-fluid p-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">采集模板</h5>
                <div class="d-flex gap-2">
                    <div class="input-group">
                        <input type="text" class="form-control" v-model="searchKey" placeholder="搜索模板...">
                        <button class="btn btn-primary" @click="searchTemplates">
                            <i class="fas fa-search"></i> 搜索
                        </button>
                    </div>
                    <button class="btn btn-success" style="min-width: 120px;" @click="handleAdd">
                        <i class="fas fa-plus"></i> 添加模板
                    </button>
                </div>
            </div>
            <div class="card-body table-responsive">
                <table class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th>模板名称</th>
                            <th>所属分类</th>
                            <th>图片数量</th>
                            <th>任务限制</th>
                            <th>奖励金额</th>
                            <th>状态</th>
                            <th>任务统计</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="template in templates" :key="template.id">
                            <td>{{ template.name }}</td>
                            <td>
                                <span class="badge bg-info">
                                    {{ showCategoryName(template.category_id) }}
                                </span>
                            </td>
                            <td>{{ template.pictures_count }}</td>
                            <td>{{ template.user_task_limit || '不限' }}</td>
                            <td>¥{{ (template.price/100).toFixed(2) }}</td>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="form-check form-switch mb-0">
                                        <input class="form-check-input" 
                                               type="checkbox"
                                               :checked="template.is_open == 1"
                                               @change="toggleTemplateStatus(template)"
                                               :disabled="updating === template.id">
                                    </div>
                                    <span :class="template.is_open == 1 ? 'text-success' : 'text-danger'">
                                        {{ template.is_open == 1 ? '开启' : '关闭' }}
                                    </span>
                                </div>
                            </td>
                            <td>
                                <div class="d-flex gap-2 align-items-center">
                                    <span class="badge bg-secondary" title="未使用">
                                        {{ template.stats.unused }}
                                    </span>
                                    <span class="badge bg-warning" title="占用中">
                                        {{ template.stats.occupied }}
                                    </span>
                                    <span class="badge bg-info" title="待审核">
                                        {{ template.stats.pending }}
                                    </span>
                                    <span class="badge bg-success" title="已通过">
                                        {{ template.stats.approved }}
                                    </span>
                                    <span class="badge bg-danger" title="已拒绝">
                                        {{ template.stats.rejected }}
                                    </span>
                                    <span class="badge bg-dark" title="异常">
                                        {{ template.stats.abnormal }}
                                    </span>
                                    <i class="fas fa-question-circle text-muted" 
                                       data-bs-toggle="tooltip" 
                                       title="从左到右依次为：未使用、占用中、待审核、已通过、已拒绝、异常"></i>
                                </div>
                            </td>
                            <td>
                                <div class="btn-group">
                                    <a class="btn btn-sm btn-primary" :href="'template-add.html?id=' + template.id">
                                        <i class="fas fa-edit"></i> 编辑
                                    </a>
                                    <button class="btn btn-sm btn-info" @click="handleDownload(template)">
                                        <i class="fas fa-download"></i> 下载
                                    </button>
                                    <button class="btn btn-sm btn-danger" @click="handleDelete(template)">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <nav>
                    <ul class="pagination justify-content-center mb-0">
                        <li class="page-item" :class="{ disabled: currentPage === 1 }">
                            <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">上一页</a>
                        </li>
                        <li v-for="page in pageNumbers" 
                            :key="page" 
                            class="page-item"
                            :class="{ active: currentPage === page }">
                            <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
                        </li>
                        <li class="page-item" :class="{ disabled: currentPage === totalPages }">
                            <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <!-- 下载选项模态框 -->
        <div class="modal fade" id="downloadModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">下载选项</h5>
                        <button type="button" class="btn-close" @click="closeDownloadModal"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="mb-3">
                                <label class="form-label">状态筛选</label>
                                <select class="form-select" v-model="downloadOptions.status">
                                    <option value="">全部状态</option>
                                    <option value="0">未使用</option>
                                    <option value="1">占用中</option>
                                    <option value="2">待审核</option>
                                    <option value="3">已通过</option>
                                    <option value="4">已拒绝</option>
                                    <option value="5">数据异常</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">日期范围</label>
                                <div class="mb-3">
                                    <select class="form-select" v-model="downloadOptions.dateType">
                                        <option value="today">仅当天</option>
                                        <option value="custom">自定义日期范围</option>
                                    </select>
                                </div>
                                <div v-if="downloadOptions.dateType === 'custom'" class="row g-2">
                                    <div class="col">
                                        <input type="date" class="form-control" 
                                            v-model="downloadOptions.startDate">
                                    </div>
                                    <div class="col-auto">至</div>
                                    <div class="col">
                                        <input type="date" class="form-control" 
                                            v-model="downloadOptions.endDate">
                                    </div>
                                </div>
                            </div>
                            <!-- 数据统计信息 -->
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                当前筛选条件下共有 <strong>{{ downloadCount }}</strong> 条数据可下载
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" @click="closeDownloadModal">取消</button>
                        <button type="button" class="btn btn-primary" @click="confirmDownload">
                            确认下载
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/lib/vue.min.js"></script>
    <script src="../js/lib/bootstrap.bundle.min.js"></script>
    <script src="../js/lib/sweetalert2.min.js"></script>
    <script src="../js/lib/quill.min.js"></script>
    <script src="../js/pages/templates.js"></script>
</body>
</html> 